<template>
    <el-container class="moreContainer">
        <el-aside class="aside" style="width: 220px;">
            <div class="head">
                <h4>频道列表</h4>
            </div>
            <div class="sortList">
                <ul>
                    <li :class="categoryId==='0'?'active':''" @click="switchCategory('0')">全部</li>
                    <li v-for="(item,index) in config" :key="index" :class="categoryId===item.categoryId?'active':''" @click="switchCategory(item)">{{item.name}}</li>
                </ul>
            </div>
        </el-aside>
        <el-main>
            <div class="search-area">
                <Search
                    :active="active"
                    @search="handleSearch"
                >
                </Search>
            </div>
            <el-table :data="newsList" :show-header="true" style="width: 100%">
                <el-table-column width="80" label="状态">
                    <template slot-scope="scope">
                        <span style="margin-right:10px;">{{scope.row.typeId==='30021'?scope.row.deptFeedState==='0'?'未反馈':'已反馈':scope.row.readStatus==='0'?'未阅读':'已阅读'}}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="标题">
                    <template slot-scope="scope" >
                        <div class="todo-item">
                            <a href="#" title="" @click="openMenuFunction(scope.row)">{{scope.row.name}}</a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="240" label="发布部门" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row["deptName"]}}
                    </template>
                </el-table-column>
                <el-table-column prop="publishTime" label="发布日期" width="180"></el-table-column>
            </el-table>
            <CustomPagination
                :totalPages="pageController.totalPages"
                :totalNum="pageController.totalNum"
                :currentPage="pageController.currentPage"
                :perPageSuggestion="pageSizeSuggestion"
                :defaultPageSize="defaultPageSize"
                @perPageChange="handlePerPageChange"
                @toFirstPage="toFirstPage"
                @toLastPage="toLastPage"
                @toNextPage="toNextPage"
                @toEndPage="toEndPage"
                @toTargetPage="toTargetPage"
            ></CustomPagination>
        </el-main>
    </el-container>
</template>

<script>
import { ArticleTabs } from '../componentStore/portlets/nbhsj/data/Content';
import appUtil from '~/assets/utils/appUtil.js';
import CustomPagination from '../componentStore/common/CustomPagination';
import Search from '../componentStore/common/Search';
import { createNamespacedHelpers } from 'vuex';
const { mapState:tagState,  } = createNamespacedHelpers('tagModule');
export default {
    name: 'More',
    data () {
        return {
            config:[],
            newsList:[],
            active:'allArticle',
            pageController:{
                totalPages:'',
                totalNum:'',
                currentPage:1,
                perPage:30
            },
            defaultPageSize:30,
            pageSizeSuggestion: [10, 20, 30, 40, 50,100],
            categoryId:'0',
            articleDetail:'./articleDetail.html'
        };
    },
    components:{
        CustomPagination,
        Search
    },
    computed: {
        ...tagState({
            activeTag:state => state.activeTag,
        }),
    },
    watch:{
        activeTag(){
            console.log(this.activeTag);
            if(this.activeTag.url==='index'){
                this.getList(this.config[this.activeName]); // 征求意见
            }
        }
    },
    created(){
        this.getInit(0);
    },
    methods: {
        switchCategory(item){
            this.pageController.pn = 1;
            this.pageController.start = 1;
            this.pageController.currentPage = 1;
            if(item==='0'){
                this.categoryId = '0';
            }else{
                this.categoryId = item.categoryId;
            }
            this.getList(this.pageController);
        },
        // 获取数据
        getInit(){
            this.$axios.get(ArticleTabs.contentUrl).then((res) => {
                // this.categoryId = res.data[0].categoryId;
                this.config = res.data;
                this.getList(this.pageController);
                this.showTemplate = true;
                // this.getNoReadCount();
            });
        },
        // 获取列表数据
        getList(pageController){
            let search = pageController.searchParams?pageController.searchParams.search:'';
            let data = {
                // typeId:param.typeId,
                //categoryId:this.categoryId,
                userId:appUtil.getSes('userId'),
                deptCodes:appUtil.getLocal('orgCode'),
                roleIds:appUtil.getSes('roleIds'),
                status:'1',
                ps:pageController.perPage,
                pn:pageController.currentPage,
                frontId:'1' //需要通过失效时间过滤
            };
            if(search){
                data.search = search;
            }
            // 查全部
            if(this.categoryId === '0'){
                let cates = [];
                for(let i=0;i<this.config.length;i++){
                    cates.push(this.config[i].categoryId);
                }
                data.categoryIds = cates.join(',');
                this.$axios.get('/ptp-cms/cmscontent//getAllContentByUserId',{params:data})
                    .then(res => {
                        if(res.data.code === -1){
                            return;
                        }
                        this.newsList = res.data.data.dataList;
                        this.pageController.totalPages = res.data.data.totalPage;
                        this.pageController.totalNum = res.data.data.totalNumber;
                        this.pageController.currentPage = res.data.data.pageNumber;
                    });
            }else{
                data.categoryId = this.categoryId;
                this.$axios.get('/ptp-cms/cmscontent/getContentByUserIdDeptCode',{params:data})
                    .then(res => {
                        if(res.data.code === -1){
                            return;
                        }
                        this.newsList = res.data.data.dataList;
                        this.pageController.totalPages = res.data.data.totalPage;
                        this.pageController.totalNum = res.data.data.totalNumber;
                        this.pageController.currentPage = res.data.data.pageNumber;
                    });
            }
           
        },
        // 打开详情页面
        openMenuFunction(item){
            console.log(item);
            let url = this.articleDetail+'?typeId=' + item.typeId + '&articleId='+ item.id;
            // window.open(url, '_blank');
            let menu = {
                url:url,
                name:item.name,
                isNew:false // 是否在新页面打开
            };
            if(item.typeId === '30021'){
                let routeData = this.$router.resolve({
                    path: '/FeedbackDetail',
                });
                menu.url = window.location.href.split('#')[0]+routeData.href+'?typeId=' + item.typeId + '&articleId='+ item.id;
            }      
            window.parent.addTabToParent(item.name,menu.url);
        },
        // 搜索
        handleSearch(searchType,searchKey){
            let tempData = Object.assign({}, this.pageController, {
                searchParams: {search: searchKey }
            });
            this.getList(tempData);
        },
        toFirstPage () {
            this.toTargetPage(1);
        },
        toLastPage () {
            let target = this.pageController;
            if (target.currentPage > 1) {
                this.toTargetPage(target.currentPage - 1);
            }
        },
        toNextPage () {
            let target = this.pageController;
            if (target.currentPage < target.totalPages) {
                this.toTargetPage(target.currentPage + 1);
            }
        },
        toEndPage () {
            this.toTargetPage(this.pageController.totalPages);
        },
        toTargetPage (pageNum) {
            let target = this.pageController;

            if (target.currentPage !== pageNum) {
                target.currentPage = pageNum;
                target.start = target.perPage * (pageNum - 1);
            }
            this.getList(this.pageController);
        },
        
        handlePerPageChange (perPage) {
            this.pageController.perPage = perPage;
            //重新算出当前页第一条数据的序号，以便重新加载表格
            this.getList(this.pageController);
        },
    },
};
</script>

<style lang="scss" scoped>
.moreContainer{
    height: 100vh;
    .aside {
        width: 120px;
        height: 100%;
        padding: 15px;
        float: left;
        border-right: 1px solid #e6e6e6;
        .head{
            
            padding-bottom: 10px;
        }
    }
    .sortList{
        li{
            padding-left: 20px;
            line-height:30px;
            cursor: pointer;
        }
        li.active{
            background: #eee;
        }
    }
    .search-area{
        width: 400px;
        
    }
}

</style>
